<template>
    <!-- 定义一个名为book的div容器，用作产品展示的容器 -->
    <div class="book">
        <!-- 使用Element UI的el-card组件来创建一个卡片样式的容器 -->
        <el-card class="book_card">
            <!-- 使用el-divider组件创建一个分隔线，并设置内容位置为左侧，显示产品名称 -->
            <el-divider content-position="left">{{book.bookName}}</el-divider>
            <!-- 使用el-row和el-col组件创建两列布局，左侧为产品封面，右侧为产品信息 -->
            <el-row>
                <el-col :span="5">
                    <!-- 显示产品封面图片，如果加载失败则显示提示文字 -->
                    <img :src="book.cover" alt="图片加载出错" class="cover">
                </el-col>
                <el-col :span="19">
                    <!-- 显示产品的类别、价格和库存信息 -->
                    <div class="information">类别：{{book.type}}</div>
                    <div class="information">价格：{{book.price}}元</div>
                    <div class="information">库存：{{book.kucun}}</div>
                </el-col>
            </el-row>
            <!-- 嵌套一个el-card组件，用于展示产品的内容简介 -->
            <el-card class="description_box">
                <div class="title">
                    内容简介
                </div>
                <div class="description">
                    <!-- 显示产品的内容简介 -->
                    {{book.description}}
                </div>
            </el-card>
            <!-- 使用Element UI的el-button组件创建一个按钮，点击时执行addCart方法，添加产品到购物车 -->
            <el-button type="success" class="shoppingCart" @click="addCart" plain icon="el-icon-shopping-cart-2">加入购物车</el-button>
        </el-card>
    </div>
</template>

<script>
    // 导入mapState函数，用于从Vuex的state中映射到组件的计算属性
    import { mapState } from "vuex";
    // 定义Vue组件
    export default {
        name: 'Book', // 组件的名称为Book
        data() {
            return {
                // 组件的初始数据对象，这里没有定义数据
            }   
        },
        methods: {
            // 定义一个名为addCart的方法，用于将产品添加到购物车
            addCart() {
                // 通过Vuex的commit方法触发ADDCART mutation，将当前产品对象this.book添加到购物车
                this.$store.commit('ADDCART', this.book)
                // 显示一个成功的消息提示框
                this.$message({
                    type: 'success',
                    message: '添加购物车成功'
                });
            }
        },
        computed: {
            // 使用mapState辅助函数映射state中的book数据到组件的计算属性
            ...mapState({
                book: (state) => state.book,
            }),
        },
    }
</script>

<style scoped>
    .book {
        background-color: #eee;
        display: flex;
        justify-content: center;
    }

    .book_card {
        margin: 30px 0px;
        width: 900px;
    }

    .el-divider__text {
        font-size: 20px;
        font-weight: 600;
    }

    .cover {
        width: 100%;
    }

    .information {
        font-size: 16px;
        padding: 16px 0px;
        padding-left: 25px;
    }

    .description_box {
        margin-top: 30px;
    }

    .description {
        margin-top: 20px;
        font-size: 15px;
        line-height: 30px;
    }

    .title {
        font-size: 20px;
        color: #deea72;
    }

    .shoppingCart {
        margin: 25px 0px;
        float: right;
    }
</style>